<template>
  <el-table :data="myData" style="width: 100%">
    <el-table-column prop="bookId" label="bookId" width="140"></el-table-column>
    <el-table-column prop="isbn" label="ISBN" width="140"></el-table-column>
    <el-table-column prop="reserveReaderId" label="reserve readerId" width="140" :formatter="readerFormatter"></el-table-column>
    <el-table-column
      prop="reserveDate"
      label="reserve Date"
      width="180"
      :formatter="dateFormatter"
    ></el-table-column>
    <el-table-column prop="borrowReaderId" label="borrow readerId" width="140" :formatter="readerFormatter"></el-table-column>
    <el-table-column
      prop="borrowDate"
      label="borrow Date"
      width="180"
      :formatter="dateFormatter"
    ></el-table-column>
    <el-table-column
      prop="returnDate"
      label="return Date"
      :formatter="dateFormatter"
    ></el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as bookApi from "@/api/books";

const myData = ref<any[]>([]);
const getData = () => {
  bookApi.searchLostBooks().then((data) => {
    myData.value = data;
    console.log('data', data);
  });
};
const dateFormatter = (row: any, col: any, value: string | number | Date | any) => {
  if (!value) {
    return '/';
  }
  return `${new Date(value).toLocaleDateString()} ${new Date(value).toLocaleTimeString()}`;
};

const readerFormatter = (row: any, col: any, value: boolean) => {
  if (!value) {
    return '/';
  }
  return value;
};

onMounted(() => {
  getData();
});
</script>

<style scoped></style>
